<template>
  <div class="GenerateReports">
    <div class="filter">
      <el-form ref="form" label-width="100px">
        <el-form-item label="设备区域:">
          <div class="el_consist" :style="'height:' + (d_a_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_isIndeterminate"
              v-model="d_a_CheckAll"
              @change="handle_d_a_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAreasCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAreasList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAreasList.length > nRowCount - 1"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备类型:">
          <div class="el_consist" :style="'height:' + (d_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_t_isIndeterminate"
              v-model="d_t_CheckAll"
              @change="handle_d_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.displayName}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceTypeList.length > nRowCount - 1"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="识别类型:">
          <div class="el_consist" :style="'height:' + (r_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="r_t_isIndeterminate"
              v-model="r_t_CheckAll"
              @change="handle_r_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.recognitionTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in recognitionTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="recognitionTypeList.length > nRowCount - 1"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="r_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="表计类型:">
          <div class="el_consist" :style="'height:' + (m_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="m_t_isIndeterminate"
              v-model="m_t_CheckAll"
              @change="handle_m_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.meterTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in meterTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="meterTypeList.length > nRowCount - 1"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="m_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备外观类型:">
          <div class="el_consist" :style="'height:' + (d_a_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_t_isIndeterminate"
              v-model="d_a_t_CheckAll"
              @change="handle_d_a_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAppearanceTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAppearanceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAppearanceTypeList.length > nRowCount - 1"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_t_CheckMore"
            @change="handleMoreChange"
          >查看更多</el-checkbox>
        </el-form-item>
        <div class="operation">
          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="pointArarmListParm.startTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="pointArarmListParm.endTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="endPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="query_data">
            <i class="query-icon"></i>查询
          </el-button>
          <el-button class="but-reset" type="text" size="medium" @click="reset_data">
            <i class="reset-icon"></i>重置
          </el-button>
          <el-button class="but-export" type="text" size="medium" @click="exportExcel">
            <i class="export-icon"></i>导出
          </el-button>
          <el-button class="but-report" type="text" size="medium" @click="customReportClick">
            <i class="report-icon"></i>自定义报表
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="left-head">设备树</div>
        <div class="tree-list">
          <Tree-List
            ref="TreeList"
            :data="allDeviceTreeList"
            :showIcon="true"
            :showState="true"
            @vtl_dataChange="treeDataChange"
            :activedDisabled="true"
          ></Tree-List>
        </div>
      </div>
      <div class="content-right">
        <div class="right-head">生成报表</div>
        <div class="content-list">
          <el-table
            :data="pointAlarmList"
            border
            stripe
            size="mini"
            class="el-table-redefine"
            style="width: 100%;"
            height="100%"
          >
            <el-table-column type="index" label="序号" align="center" fixed="left" width="50"></el-table-column>
            <el-table-column type="selection" align="center" fixed="left" width="50"></el-table-column>
            <el-table-column
              v-for="(column) in customTableColumn"
              :key="column.value"
              :label="column.text"
              :prop="column.prop"
            >
              <template slot-scope="scope">
                <div v-if="column.value === 1">
                  <span>{{scope.row ? matchArrayContentStr(scope.row.pointHistory.value, meterReadingDealWith) : "未知"}}</span>
                </div>
                <div v-else-if="column.value === 18">
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop="showImage(scope.row.pointHistory.flirPic)"
                    :hidden="!(scope.row.point && (scope.row.point.saveTypeId === 1 || !scope.row.point.saveTypeId === 4))"
                  >红外图片</el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop="showImage(scope.row.pointHistory.cameraPic)"
                    :hidden="!(scope.row.point && (scope.row.point.saveTypeId === 2 || !scope.row.point.saveTypeId === 4))"
                  >可见光图片</el-button>
                </div>
                <span v-else>{{getReportValue( column.prop, scope.row)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-area">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper, slot"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100, 300]"
            :page-size="pointArarmListParm.size"
            :current-page="pointArarmListParm.page"
            :total="tansksTotal"
          >
            <el-button type="text" size="mini">前往</el-button>
          </el-pagination>
        </div>
      </div>
    </div>
    <CustomColumnDialog ref="CustomColumnDialog" @change="confirm_finish_click"></CustomColumnDialog>
  </div>
</template>
<script>
import {
  devicesAreas,
  devicesTypesList,
  reconTypesList,
  meterTypesList,
  faceTypesList,
  pointsTree,
  pointAlarmRecordReportList
} from "@/api/apiManagement";
import {
  ReportColumn,
  matchArrayContent,
  AlarmLevel,
  MeterReadingDealWith
} from "@/utils/constant";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { formatJson } from "@/utils";
import {
  dateToDateStr,
  getDateTopMonth,
  dateToDateWithToSecondStr
} from "@/utils/utilsMethod";
import CustomColumnDialog from "./components/CustomColumnDialog";
import TreeList from "@/components/TreeList";

export default {
  components: { CustomColumnDialog, TreeList },

  data() {
    return {
      robot_id: null,
      deviceAreasList: [],
      deviceTypeList: [],
      recognitionTypeList: [],
      meterTypeList: [],
      deviceAppearanceTypeList: [],

      nRowCount: 0,

      d_a_isIndeterminate: false,
      d_a_CheckAll: false,
      d_a_CheckMore: false,
      d_t_isIndeterminate: false,
      d_t_CheckAll: false,
      d_t_CheckMore: false,
      r_t_isIndeterminate: false,
      r_t_CheckAll: false,
      r_t_CheckMore: false,
      m_t_isIndeterminate: false,
      m_t_CheckAll: false,
      m_t_CheckMore: false,
      d_a_t_isIndeterminate: false,
      d_a_t_CheckAll: false,
      d_a_t_CheckMore: false,

      filterForm: {
        deviceAreasCheckList: [],
        deviceTypeCheckList: [],
        recognitionTypeCheckList: [],
        meterTypeCheckList: [],
        deviceAppearanceTypeCheckList: []
      },

      allDeviceTreeList: [],
      treeCheckDevice: [],
      topCheckTreeId: "",

      pointArarmListParm: {
        page: 1,
        size: 20,
        robotId: 1,
        startTime: "",
        endTime: "",
        pointIds: ""
      },
      tansksTotal: 0,
      pointAlarmList: [],
      customTableColumn: ReportColumn,
      startPickerOptions: {
        disabledDate: time => {
          let endTime =
            this.pointArarmListParm.endTime === null
              ? ""
              : this.pointArarmListParm.endTime;
          return (
            time.getTime() > new Date(endTime).getTime() ||
            time.getTime() > Date.now() - 8.64e6
          );
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let startTime =
            this.pointArarmListParm.startTime === null
              ? ""
              : this.pointArarmListParm.startTime;
          return (
            time.getTime() <
              new Date(startTime).getTime() - 8 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 8.64e6
          ); //如果没有后面的-8.64e6就是不可以选择今天的   减去一天的时间代表可以选择同一天
        }
      },
      meterReadingDealWith: MeterReadingDealWith
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.pointArarmListParm.robotId = this.robot_id;
    this.customTableColumn = JSON.parse(localStorage.getItem("saveColumnList"));
    if (!this.customTableColumn || this.customTableColumn.length <= 0) {
      this.customTableColumn = ReportColumn;
    }
    this.pointArarmListParm.startTime = dateToDateStr(
      getDateTopMonth(new Date())
    );
    this.pointArarmListParm.endTime = dateToDateStr(new Date());
    // 设备区域
    this.getDevicesAreas();
    // 设备类型
    this.getDevicesTypesList();
    // 识别类型
    this.getReconTypesList();
    // 表计类型
    this.getMeterTypesList();
    // 设备外观类型
    this.getFaceTypeList();
    // 点位树
    this.getPointsTree();
  },
  mounted() {
    this.nRowCount =
      document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    // 监听窗口大小
    window.onresize = () => {
      this.nRowCount =
        document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    };
  },
  methods: {
    // ================= 接口请求 ================ //
    // 设备区域
    getDevicesAreas() {
      devicesAreas()
        .then(response => {
          if (response) {
            this.deviceAreasList = response;
          }
        })
        .catch(() => {});
    },
    // 设备类型
    getDevicesTypesList() {
      devicesTypesList()
        .then(response => {
          if (response.list) {
            this.deviceTypeList = response.list.filter(item => {
              return parseInt(item.name) >= 2000;
            });
          }
        })
        .catch(() => {});
    },
    // 识别类型
    getReconTypesList() {
      reconTypesList()
        .then(response => {
          if (response.list) {
            this.recognitionTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 表计类型
    getMeterTypesList() {
      meterTypesList()
        .then(response => {
          if (response.list) {
            this.meterTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 设备外观类型
    getFaceTypeList() {
      faceTypesList()
        .then(response => {
          if (response.list) {
            this.deviceAppearanceTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 点位树
    getPointsTree() {
      pointsTree()
        .then(response => {
          if (response) {
            this.allDeviceTreeList = response;
            this.filterTree();
          }
        })
        .catch(() => {});
    },
    // 点位告警记录
    getPointAlarmRecordList() {
      this.pointArarmListParm.startTime =
        this.pointArarmListParm.startTime == null
          ? ""
          : this.pointArarmListParm.startTime;
      this.pointArarmListParm.endTime =
        this.pointArarmListParm.endTime == null
          ? ""
          : this.pointArarmListParm.endTime.length <= 10 &&
            this.pointArarmListParm.endTime.length != 0
          ? this.pointArarmListParm.endTime + " 24:00:00"
          : this.pointArarmListParm.endTime;

      var parm = {
        page: this.pointArarmListParm.page,
        size: this.pointArarmListParm.size,
        robotId: this.pointArarmListParm.robotId,
        startTime: this.pointArarmListParm.startTime,
        endTime: this.pointArarmListParm.endTime,
        pointIds: this.pointArarmListParm.pointIds
      };
      pointAlarmRecordReportList(parm)
        .then(response => {
          if (response.list) {
            this.tansksTotal = response.total;
            this.pointAlarmList = response.list.map(item => {
              if (item.pointHistory) {
                item.pointHistory.reconStatus =
                  item.pointHistory.reconStatus === 0 ? "正常" : "异常";
                item.pointHistory.checkStatus =
                  item.pointHistory.checkStatus === 0 ? "已审核" : "未审核";
              }
              item.alarmLevel = matchArrayContent(item.alarmLevel, AlarmLevel);
              return item;
            });
          }
        })
        .catch(() => {});
    },
    // ================= 上部多选框勾选 ================ //
    handle_d_a_CheckAllChange(val) {
      this.filterForm.deviceAreasCheckList = val
        ? this.deviceAreasList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    handle_d_t_CheckAllChange(val) {
      this.filterForm.deviceTypeCheckList = val
        ? this.deviceTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    handle_r_t_CheckAllChange(val) {
      this.filterForm.recognitionTypeCheckList = val
        ? this.recognitionTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    handle_m_t_CheckAllChange(val) {
      this.filterForm.meterTypeCheckList = val
        ? this.meterTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    handle_d_a_t_CheckAllChange(val) {
      this.filterForm.deviceAppearanceTypeCheckList = val
        ? this.deviceAppearanceTypeList.map(item => {
            return item.id;
          })
        : [];

      this.filterTree();
    },
    handleCheckChange() {
      this.filterTree();
    },
    handleMoreChange() {},
    // ================= 中间各个事件 ================ //
    query_data() {
      var checkTree = this.$refs.TreeList.vtl_getCurrentNode();
      if (checkTree && checkTree.leaf == true) {
        if (
          typeof checkTree.id === "string" &&
          checkTree.id.indexOf("point_") != -1
        ) {
          let index = checkTree.id.lastIndexOf("_");
          let slice = checkTree.id.substring(index + 1);
          this.pointArarmListParm.pointIds = slice;
        }
      } else {
        let pointIdsArr = [];
        var tempList = this.$refs.TreeList.vtl_getLeafNodesId();
        if (checkTree) {
          tempList = this.$refs.TreeList.vtl_getParentNodeLeafNodesId(
            checkTree
          );
        }
        pointIdsArr = tempList.map(item => {
          if (typeof item === "string" && item.indexOf("point_") != -1) {
            let index = item.lastIndexOf("_");
            let slice = item.substring(index + 1);
            return slice;
          }
          return "";
        });
        this.pointArarmListParm.pointIds = pointIdsArr.join(",");
      }
      if (this.topCheckTreeId != this.pointArarmListParm.pointIds) {
        this.pointArarmListParm.page = 0;
        this.pointArarmListParm.size = 20;
        this.pointAlarmList = [];
      }
      this.topCheckTreeId = this.pointArarmListParm.pointIds;

      this.getPointAlarmRecordList();
    },
    reset_data() {
      this.filterForm.deviceAreasCheckList = [];
      this.filterForm.deviceTypeCheckList = [];
      this.filterForm.recognitionTypeCheckList = [];
      this.filterForm.meterTypeCheckList = [];
      this.filterForm.deviceAppearanceTypeCheckList = [];
      this.filterForm.pointIds = "";
      this.d_a_CheckAll = false;
      this.d_t_CheckAll = false;
      this.r_t_CheckAll = false;
      this.m_t_CheckAll = false;
      this.d_a_t_CheckAll = false;
      this.topCheckTreeId = "";
      this.filterTree();

      this.pointArarmListParm.page = 0;
      this.pointArarmListParm.size = 20;
      this.pointArarmListParm.startTime = dateToDateStr(
        getDateTopMonth(new Date())
      );
      this.pointArarmListParm.endTime = dateToDateStr(new Date());
      this.$refs.TreeList.vtl_setCurrentNodeId({});
      this.pointArarmListParm.pointIds = this.getAllPointIds();

      this.treeCheckDevice = [];
      this.getPointAlarmRecordList();
    },
    exportExcel() {
      if (this.pointAlarmList.length > 0) {
        require.ensure([], () => {
          const { export_json_to_excel } = require("vendor/Export2Excel");
          let tempArray = this.customTableColumn.filter(
            item => item.value != 18
          );
          const tHeader = this.customTableColumn.map(item => {
            return item.text;
          });
          tHeader.push("采集信息");
          const filterVal = this.customTableColumn.map(item => {
            return item.prop;
          });
          filterVal.push("picUrl");
          let temp = JSON.parse(JSON.stringify(this.pointAlarmList));
          const data = formatJson(filterVal, this.formatAlartType(temp));
          export_json_to_excel(
            tHeader,
            data,
            "报表" + dateToDateWithToSecondStr(new Date())
          );
        });
      } else {
        this.$message({
          message: "请选择数据"
        });
      }
    },
    formatAlartType(data) {
      let array = data.slice(0);
      array.forEach((item, index) => {
        var picUrl =
          item.point &&
          (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
            ? item.pointHistory.flirPic
            : item.point.saveTypeId === 2
            ? item.pointHistory.cameraPic
            : "";
        var picType =
          item.point &&
          (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
            ? "红外图片"
            : item.point.saveTypeId === 2
            ? "可见光图片"
            : "";
        item["picUrl"] = picType + "_" + picUrl;
        if (item.pointHistory) {
          item.pointHistory.value = matchArrayContent(
            item.pointHistory.value,
            MeterReadingDealWith
          );
        }
      });
      return array;
    },
    customReportClick() {
      this.$refs.CustomColumnDialog.isShowDia(true);
    },
    // ================= 树状结构事件 ================ //
    getAlarmLevelClassName(value) {
      if (value === 0) {
        return "normal";
      }
      if (value === 1) {
        return "warning";
      }
      if (value === 2) {
        return "general-alarm";
      }
      if (value === 3) {
        return "serious-alarm";
      }
      if (value === 4) {
        return "danger-alarm";
      }
    },
    //
    deepRecursionTraversal(node) {
      node.map(item => {
        if (item.children) {
          this.deepRecursionTraversal(item.children);
        } else {
          if (item.points) {
            // item.children = item.points;
            item.points = item.points.map(item => {
              item.id = "point_" + item.id;
              item.leaf = true;
              return item;
            });
            this.deepRecursionTraversal(item.points);
          } else {
            //
          }
        }
        return item;
      });
      return node;
    },
    //
    filterTree() {
      this.$refs.TreeList.vtl_setCurrentNodeId({});
      this.$refs.TreeList.vtl_nodesFilter({
        deviceAreasList: this.filterForm.deviceAreasCheckList,
        deviceTypeList: this.filterForm.deviceTypeCheckList,
        recognitionTypeList: this.filterForm.recognitionTypeCheckList,
        meterTypeList: this.filterForm.meterTypeCheckList,
        deviceAppearanceTypeList: this.filterForm.deviceAppearanceTypeCheckList,
        useList: [],
        pointType: []
      });
    },
    // ----------------- 点击事件相关 ---------- //
    // ================= table列表事件 ================ //
    showImage(val) {
      var image = new Image();
      image.src = val;
      var viewer = new Viewer(image, {
        navbar: false,
        hidden: function() {
          viewer.destroy();
        }
      });
      viewer.show();
    },
    getReportValue(key, row) {
      let keys = key.split(".");
      let temp = row[keys[0]];
      if (temp) {
        for (let i = 1, len = keys.length; i < len; i++) {
          if (typeof temp === "object") {
            temp = temp[keys[i]];
          }
        }
      }

      return temp;
    },
    handleSizeChange(val) {
      this.pointArarmListParm.size = val;
      this.getPointAlarmRecordList();
    },
    handleCurrentChange(val) {
      this.pointArarmListParm.page = val;
      this.getPointAlarmRecordList();
    },
    // ============ 弹框回调 ============= //
    confirm_finish_click() {
      this.customTableColumn = JSON.parse(
        localStorage.getItem("saveColumnList")
      );
      if (!this.customTableColumn || this.customTableColumn.length <= 0) {
        this.customTableColumn = ReportColumn;
      }
      this.getPointAlarmRecordList();
    },
    treeDataChange(tree, list, obj) {
      this.pointArarmListParm.pointIds = this.getAllPointIds();
      this.getPointAlarmRecordList();
    },
    getAllPointIds() {
      var temp = this.$refs.TreeList.vtl_getLeafNodesId().map(item => {
        if (typeof item === "string" && item.indexOf("point_") != -1) {
          let index = item.lastIndexOf("_");
          let slice = item.substring(index + 1);
          return slice;
        }
        return "";
      });
      return temp.join(",");
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    }
  }
};
</script>

<style>
.GenerateReports .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.GenerateReports .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.GenerateReports .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.GenerateReports .filter .el-radio__label {
  font-size: 13px;
}
.GenerateReports .filter .el-checkbox {
  font-size: 13px;
}
.GenerateReports .filter .el-checkbox__label {
  font-size: 13px;
}
.GenerateReports .filter .el-radio {
  width: 86px;
  margin-left: 10px;
}
.GenerateReports .filter .el-radio + .el-radio {
  margin-left: 5px;
}
.GenerateReports .filter .el-checkbox {
  width: 200px;
  margin-left: 10px;
}
.GenerateReports .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
.GenerateReports .content-left .custom-tree-node span {
  font-size: 13px;
}

.GenerateReports .folder {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(10, 158, 80); */
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
  float: left;
}
.GenerateReports .file {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}
.GenerateReports .alarm {
  width: 12px;
  height: 13px;
  margin: 3px 2px 0 2px;
  float: left;
}
.GenerateReports .normal {
  background-color: rgb(50, 150, 50);
}
.GenerateReports .warning {
  background-color: rgb(0, 0, 255);
}
.GenerateReports .general-alarm {
  background-color: rgb(255, 255, 0);
}
.GenerateReports .serious-alarm {
  background-color: rgb(255, 128, 10);
}
.GenerateReports .danger-alarm {
  background-color: rgb(155, 0, 0);
}

.GenerateReports {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.GenerateReports .filter {
  position: relative;
  width: 100%;
  /* height: 65px; */
  background-color: #eeeeee;
}
.GenerateReports .el_consist {
  width: calc(100% - 220px);
  float: left;
  overflow: hidden;
}
.GenerateReports .allCheckBox {
  float: left;
}
.GenerateReports .moreCheckBox {
  float: right;
}
.GenerateReports .operation {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
}

.GenerateReports .operation .el-form-item {
  margin-top: 1px;
  margin-bottom: 0;
  float: left;
}
.GenerateReports .operation .el-form-item__content {
  width: 210px;
  margin-left: 5px !important;
}
.GenerateReports .operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.GenerateReports .operation .el-date-editor.el-input {
  width: 200px;
}
.GenerateReports .operation .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.GenerateReports .operation .el-input__icon {
  line-height: 26px;
}
.GenerateReports .but-query,
.GenerateReports .but-reset,
.GenerateReports .but-export,
.GenerateReports .but-report {
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.GenerateReports .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.GenerateReports .reset-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%;
  float: left;
}
.GenerateReports .export-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/export.png);
  background-size: 100% 100%;
  float: left;
}
.GenerateReports .report-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/report.png);
  background-size: 100% 100%;
  float: left;
}

.GenerateReports .content {
  width: 100%;
  flex-grow: 1;
}
.GenerateReports .content-left {
  position: relative;
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
}
.GenerateReports .content-right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  /* margin-left: 300px; */
  /* padding: 0 0 0 10px; */
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
}
.GenerateReports .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.GenerateReports .tree-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow: auto;
}
.GenerateReports .right-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.GenerateReports .content-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 59px);
  /* overflow: auto; */
}
.GenerateReports .content-list .cell .el-button {
  margin-left: 0px;
  margin-right: 10px;
}

.GenerateReports .pagination-area {
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0px;
  background-color: #eeeeee;
}

.GenerateReports .el-table-redefine {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-flow: column; */
}

.GenerateReports .el-table-redefine .el-table__body-wrapper {
  /* overflow: hidden; */
  /* overflow-y: auto; */
  /* flex-grow: 1; */
}
</style>